/* body設定 */
body{
	background-image:url("../pic2025/n25_dot.png"); /* 背景画像の指定 */
}

/* main設定 */
main{
	border-bottom:solid 3px #6C9BD2;         /* メイン下部の横線 */
	font-family: 'BIZ UDGothic', sans-serif; /* フォントの指定 */
}

/* スペースを空ける*/
.space {
	position: relative;/*相対位置*/
	margin:2%;         /*上下左右すべてに余白*/
}

/* ↓↓ここからタブボタンの設定 ↓↓*/
/* タブボタンの配置設定 */
.tab-switch {
  display: flex;            /* タブを横並びに配置 */
  flex-wrap: wrap;          /* 幅が足りない場合は折り返す */
  justify-content: center;  /* 中央揃えにする */
  gap: 0 5px;               /* タブ間の余白（横方向） */
  margin: auto;             /* 中央寄せ */
}

/* ラジオボタン自体は非表示 */
.tab-switch input {
    display: none;            /* 見た目に表示されないようにする */
}

/* タブボタンの基本スタイル（円形アニメーション付き） */
.tab-switch > label {
	flex: 1 1 ;                   /* タブが均等に幅をとる */
    order: -1;                    /* 上部に表示する */
    position: relative;           /* 相対位置 */
    padding: 0.7em 2em;           /* 上下左右の内側余白 */
    transition: 0.3s all;         /* 変化を滑らかに */
	background: #f2f3f4;          /* 背景色:白 */
  	color: #999;                  /* 文字色:グレー*/
  	overflow: hidden;             /* 擬似要素がはみ出さないように */
  	transition-duration: .4s;     /* アニメーションの速度 */
  	z-index: 2;                   /* 擬似要素より前面に表示 */
 	border-top-left-radius: 10px; /* 左上の角を丸くする */
	border-top-right-radius: 10px; /* 右上の角を丸くする */
	border-bottom-left-radius: 0px; /* 左下の角はそのまま */
	border-bottom-right-radius: 0; /* 右下の角はそのまま */
    text-align: center;           /* テキストを中央揃えに */
    cursor:url('../cursor/n25_電球(q&a).png'),pointer;  /*カーソルの画像*/
}

/* 円形の背景アニメーション（擬似要素） */
.tab-switch > label::after {
  background: #6C9BD2 ;                   /* 円の色：紫 */
  border-radius: 50%;                     /* 円形にする */
  content: "";                            /* 空のコンテンツ*/
  display: block;                         /* ブロック要素として表示 */
  margin: auto;                           /* 中央に配置 */
  opacity: 0;                             /* 初期状態では透明 */
  pointer-events: none;                   /* クリック不可にする */
  position: absolute;                     /* 絶対位置指定 */
  top: 50%;                               /* 垂直方向の中央 */
  left: 0;                                /* 左端から開始 */
  right: 0;                               /* 右端まで広げる */
  width: 100%;                            /* 幅いっぱいに広げる */
  padding-top: 100%;                      /* 高さを幅に合わせて円形に */
  height: 0;                              /* 高さは0 */
  z-index: -1;                            /* 背景として表示 */
  transform: translateY(-50%) scale(0.1); /* 小さく中央に配置 */
  transition: opacity .5s, transform 0s;  /* アニメーション設定 */
  transition-delay: 0s, .4s;              /* 遅延設定*/
}

/* ホバー時のスタイル変更 */
.tab-switch > label:hover {
  color: #fff;                   /* 文字色:白 */
}
.tab-switch > label:hover::after {
  opacity: 1;                                         /* 円を表示する */
  transform: translateY(-50%) scale(1.1);             /* 円を拡大して中央に表示 */
  transition-delay: 0s;                               /* 遅延なしで表示開始 */
  transition: opacity .8s, transform .6s ease-in-out; /* アニメーション詳細 */
}

/* 選択状態のスタイル */
.tab-switch > label:has(input:checked) {
  color: #fff;                                        /* 選択されたタブの文字色:白 */
}
.tab-switch > label:has(input:checked)::after {
  opacity: 1;                                         /* 円を表示する */
  transform: translateY(-50%) scale(4.1);             /* 円を拡大して中央に表示 */
  transition: opacity .8s, transform .6s ease-in-out; /* アニメーション詳細 */
}

/* ↑↑ここまでタブボタンの設定 ↑↑*/



/* タブコンテンツのスタイル */
.tab-switch > div {
    display: none;               /* 初期状態では非表示 */
    width: 100%;                 /* コンテンツ幅を全体に */
    padding: 1.5em 1em;          /* 内側余白 */
    background-color: #f0f8ff;   /*タブコンテンツ内の背景 */
    border-top:solid 3px #6C9BD2;/* タブ上部の線 */
   
}

/* 選択されたタブのコンテンツを表示 */
.tab-switch label:has(:checked) + div {
    display: block;           /* 選択されたタブに対応するコンテンツを表示 */
}

 
/* details summaryの基本設定 */
details summary {
  display: block;		/* 幅いっぱいに広がる */
  position: relative;	/* 絶対位置指定用 */
  padding: 0.5rem;		/* 内側余白 */
  cursor:url('../pic2025/n25_cursor/n25_電球(q&a).png'),pointer; /*カーソル*/
}

/* summaryの矢印を消す*/
summary {                   
	list-style: none;
}

/* summaryの矢印を消す (safari対応)*/
summary::-webkit-details-marker { 
	display:none;
}

/* 左の吹き出し本体（学生）*/
.box1{
	position: relative;                 /* 絶対位置指定用*/
	padding:20px 30px 20px 20px;        /* 内側余白 */                      
	border-radius:10px;                 /* 角を丸くする */
	color: #223a70 ;                    /* テキストの色 (濃い青) */
	background-color: #add8e6;          /* 背景の色(薄い青) */
	margin-left: 110px;                 /* 左の余白(アイコンスペース) */
	margin-right:50%;                   /* 右側に40%の余白 */
	font-size:108%;                     /* 文字の大きさ */
	/*display:inline-block;*/           /* インラインブロック表示 */
	z-index: 8;                         /* 重なり順 前に表示 */
	transition: background-color 0.25s; /* ゆっくり表示 */
	filter: drop-shadow(2.7px 2.7px 1px rgba(0, 0, 0, .6));  /* 影 */
	
	
}

/* 左の吹き出し本体のテキスト（学生）*/
.box1_txt{
	text-align:left;  /* テキストを左寄せに */
	
}


/* 左の吹き出しのアイコン画像の位置設定（学生）*/
.icon1{
	position: absolute; /* .box1(親)を基準にして絶対位置で配置 */
	left: -110px;       /* .box1(親)の左端から110px外側に配置*/
	top: 15px;          /* .box1(親)の上端から15px外側に配置*/
}

/* 左の吹き出しのアイコン画像の大きさ設定（学生）*/
.icon1 img{
	filter: none !important;
	width:79px;               /* 横幅 */

}
  
/* 左の吹き出しの三角（学生）*/
.box1:before{
	content: '';                          /* 疑似要素を生成（中身は空） */
	position: absolute;                   /* .box1(親)を基準にして絶対位置で配置 */
	display: block;                       /* ブロック要素として表示 */
	width: 0;                             /* 幅・高さを0にして三角形を作る */
	height: 0;
	left: -12px;                           /* 吹き出しの左外側に配置 */
	top: 20px;                             /* 上から20pxの位置に配置 */
	border-right: 15px solid #add8e6;      /* 右向きの三角形の本体（背景色と同じ） */
	border-top: 15px solid transparent;    /* 上辺は透明（形を作るため） */
	border-bottom: 15px solid transparent; /* 上辺は透明（形を作るため） */
	transition: border-right-color 0.25s;  /* ホバー時の色変化を滑らかにする */	
}

/* 左の吹き出しのホバー（学生）*/
.box1:hover{
	background-color: #fffeb1; /* ホバー時の背景色（淡い黄色） */
	filter: drop-shadow(6px 6px 2px rgba(0, 0, 0, .6));
}
  
.box1:hover:before {
	border-right-color: #fffeb1;/* 三角形の色も背景に合わせて変更 */
}

/* 右の吹き出し本体(社員）*/
.box2{
	position: relative;              /* 絶対位置の基準に設定 */
	padding: 20px;                   /* 内側余白 */
	border-radius: 10px;             /* 角を丸くする */
	color: #223a70;                  /* テキストの色（濃い青） */
	background-color:#f9bbc4 ;       /* 背景色（ピンク） */
	margin-right: 120px;             /* 右に余白（アイコンのスペース） */
	margin-left: 40%;                /* 左に40%の余白（右寄りに配置） */
	font-size:108%;                  /* フォントサイズ*/
	line-height: 1.5;                /* 行間を1.5倍 */
	/* animation: fadeIn 3s ease; */ /* アニメーション */
	filter: drop-shadow(2.7px 2.7px 1px rgba(0, 0, 0, .6));/* 影 */
}

.box2_txt{
	text-align:left;/* テキストは左寄せ（右寄せの中で整える） */
}

/* 右の吹き出し(社員）のアイコン画像*/  
.icon2{
	position: absolute;/* .box2(親)を基準にして絶対位置で配置 */
	right: -110px;     /* .box2(親)の右端から110px外側に配置*/
	top: 15px;         /*.box2(親)の上端から15px外側に配置*/
}


/* 右の吹き出し三角(社員）*/
.box2::before{
	content: '';                           /* 疑似要素を生成（中身は空） */
	position: absolute;                    /* .box2(親)を基準に絶対位置で配置 */
	display: block;                        /* ブロック要素として表示 */
	width: 0;                              /* 幅・高さを0にして三角形を作る */
	height: 0;
	right: -12px;                          /* 吹き出しの右外側に配置（12px外） */
	top: 20px;                             /* 上から20pxの位置に配置 */
	border-left: 15px solid #f9bbc4;       /* 左向きの三角形の本体（背景色と同じ） */
	border-top: 15px solid transparent;    /* 上辺は透明（形を作るため） */
	border-bottom: 15px solid transparent; /* 下辺も透明（形を作るため） */
  }
 
 /* 右の吹き出しゆっくりアニメーション(社員）*/
 .box2.fade {
  animation: fadeIn 1.5s ease-in-out; /*アニメーション */
}


 /* オープン時にアニメーションを設定 */
details[open] .box2 {
  animation: fadeIn 0.5s ease;/* fadeInアニメーション */
}


/* fadeInアニメーションの定義 */
@keyframes fadeIn {
  0% {
    opacity: 0;                   /* 最初透明 */
    transform: translateY(-10px); /* 上から表示(-10pxずらす) */
  }
  100% {
    opacity: 1;                   /* 完全に表示 */
    transform: none;              /* 元の位置に戻す */
  }
}
 
/* ＋のアイコンの疑似要素（縦と横の棒の共通の設定） */
details summary::before,
details summary::after {
  content: "";            /* 空の疑似要素を作成 */
  position: absolute;     /* 絶対位置に配置 */
  right: 51%;             /* 右端からの距離 */
  top: 0;                 /* 上からの距離 */
  bottom: 0;              /* 下からの距離 */
  margin: auto 0;         /* 中央に配置 */
  background-color: #333; /* 背景色 */
  width: 16px;            /* 横幅 */
  height: 3px;            /* 縦幅 */
  z-index: 10;            /* 重なり順 前に表示 */
}

/* 縦棒は90度回転 */
details summary::after {
  transform: rotate(90deg);
}
 
/* 閉じる際の横棒のアニメーションの指定*/
details summary::before {
  animation: closing-before 0.3s ease-in;
}
/* 閉じる際の縦棒のアニメーションの指定 */
details summary::after {
  animation: closing-after 0.3s ease-in;
}
/* 閉じる際の横棒のアニメーション*/
@keyframes closing-before {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* 閉じる際の縦棒のアニメーション */
@keyframes closing-after {
  0% {
    transform: rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: rotate(90deg);
    opacity: 1;
  }
}
/* 開く際の横棒のアニメーションの指定*/
details[open] summary::before {
  animation: opening-before 0.3s ease-in forwards;
}
/* 開く際の縦棒のアニメーションの指定 */
details[open] summary::after {
  animation: opening-after 0.3s ease-in forwards;
}
/* 開く際の横棒のアニメーション*/
@keyframes opening-before {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
/* 開く際の縦棒のアニメーション */
@keyframes opening-after {
  0% {
    transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: rotate(180deg);
    opacity: 0;
  }
}



/* 画像（円グラフ）に関する設定 */
img.data {
  width: 80%;/* 画像の幅 */
  margin-right: 1px;/* 右側の余白 */
}



/* キラキラボタンの位置設定 */

.button {
	position: relative;/* 相対位置指定 */
}


/* キラキラ部分 */
.star {
  position: absolute;/* 位置基準の宣言 */
  display: block;/* ブロック要素 */
  width: 10px; /* キラキラの横幅を指定 */
  height: 10px; /* キラキラの縦幅を指定 */
 background-image: url("../pic2025/n25_glitter/n25_star-yellow.svg"); /* キラキラの画像のパスを記入 */
  background-size: contain; /* 画像を要素サイズに収める（縦横比を維持） */
  background-repeat: no-repeat;
  background-position: center center;
  animation: button 1s;
  pointer-events: none;
}

/* キラキラが発生するアニメーション */
@keyframes button {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes button1 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}


/*↓↓ 以下スマホ対応 ↓↓*/
@media (max-width: 900px) {

	.tab-switch > label {
	padding:1.5em 2px; /* タブ切り替えボタンを大きく*/
	font-size:11px;	   /* 文字の大きさ */
	}

	.box1{
		padding:10px 20px 10px 10px;    /* 内側余白 */
		margin-right:2%;                /* 右側の余白 */
		font-size:12px;	                /* 文字の大きさ */
		margin-left: 78px;
	}
	
	
	.box1:before{
		top: 10px;  /* box1の位置調整 */
	}
	
	.box1:hover{
	filter: drop-shadow(4px 4px 1px rgba(0, 0, 0, .6));
	}
	
	.box2{
		padding:10px;   /* 内側余白 */
		margin-left:2%; /* 左側の余白 */
		font-size:12px; /* 文字の大きさ */
		margin-right: 75px;
		
	}
	
	.icon1 {
    top: 0px; /* アイコン1(学生)の位置 */
    left: -83px;
	}
	
	.icon1 img{
    width: 60px;/* アイコン1(学生)の大きさ*/
	}
	
	.icon2 {
    top: -1px; /* アイコン2(社員)の位置*/
    right: -74px;
	}
	
	.icon2 img{
    width: 61px; /* アイコン2(社員)の大きさ*/
	}
	
	.box2:before{
		top: 10px; /* box2の位置調整 */
	}

	details summary::before,
	details summary::after {
		right: 7%;           /* 右端からの距離 */
		width: 8px;          /* 横幅 */
	  	height: 2px;         /* 縦幅 */
	}

	details summary::before,
	details summary::after {
		right: 7%;           /* 右端からの距離 */
		width: 8px;          /* 横幅 */
	  	height: 2px;         /* 縦幅 */
	}

}
/*↑↑ ここまでスマホ対応 ↑↑*/	


/*--------ハンバーガーメニュー--------*/
/*位置調整*/
.nav-fade__list{
	margin-top:10%;
}
.nav-fade__list1 .nav-fade__item{
	padding-left:0;
}
/* 横画面（ランドスケープモード）の場合 */
@media only screen and (orientation: landscape) {
	/*↓ハンバーガーメニュースクロールさせる↓*/
	.nav-fade__wrapper{
		height:100vh;
		overflow-x:hidden;
		overflow-y:scroll;
	}
	/*ハンバーガーメニューの言語選択を横に並べる*/
	.nav-fade__list1 .nav-fade__item{
		display: inline-block;
		padding-left:15px;
	}	
}